<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>治安管理</title>
    
    <link rel="stylesheet" href="./css/safe.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <!-- 标题 -->
    <h5 class="Safe-title">拱墅区“城市眼·云共治”平台————治安管理</h5>
    <!-- 内容 -->
    <div class="Safe">
        <!-- 概况 -->
        <div class="Safe-left">
            <h6>概况</h6>
            <ul class="SafeL-head">
                <li>
                    <p>1.932</p>
                    <p>场景总量</p>
                </li>
                <li>
                    <p>1.932</p>
                    <p>对象总量</p>
                </li>
                <li>
                    <p>1.932</p>
                    <p>点位总量</p>
                </li>
            </ul>
            <ul class="SafeL-nav">
                <li>
                    <div class="SafeL-ti">今年预警总量</div>
                    <div class="SafeL-bottom">
                        <h6>22,990</h6>
                        <div class="SafeLb-right">
                            <p>今日新增</p>
                            <div class="pic">
                                <p>33</p>
                                <img src="images/up.png" alt="">
                            </div>
                            
                        </div>
                    </div>
                </li>
                <li>
                    <div class="SafeL-ti">今年预警总量</div>
                    <div class="SafeL-bottom">
                        <h6>22,990</h6>
                        <div class="SafeLb-right">
                            <p>今日新增</p>
                            <div class="pic">
                                <p>33</p>
                                <img src="images/up.png" alt="">
                            </div>
                            
                        </div>
                    </div>
                </li>
            </ul>
            <!-- 态势分析（近一周） -->
            <div class="SafeL-cont">
                <h6>态势分析（近一周）</h6>
                <ul>
                    <li>
                        <div class="SafeLc-left">告警态势</div>
                        <div id="c1" style="width:100%;height:120%;"></div>
                    </li>
                    <li>
                        <div class="SafeLc-left">处置态势</div>
                        <div id="c2"style="width:100%;height:120%"></div>
                    </li>
                </ul>
            </div>
            <!-- 告警列表 -->
            <div class="SafeL-foot">
                <h6>今日辖区场景告警列表</h6>
                    <ul>
                        <li>区域</li>
                        <li>护校安园</li>
                        <li>敏感场所</li>
                        <li>人员聚集</li>
                    </ul>
                    <ul>
                        <li>拱宸桥</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
                    <ul>
                        <li>祥符</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
                    <ul>
                        <li>和睦</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
                    <ul>
                        <li>小河</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
                    <ul>
                        <li>湖墅</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
                    <ul>
                        <li>米市巷</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
                    <ul>
                        <li>大关</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
                    <ul>
                        <li>上塘</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
                    <ul>
                        <li>康桥</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
                    <ul class="ul">
                        <li>半山</li>
                        <li>42.872</li>
                        <li>3.213</li>
                        <li>31.212</li>
                    </ul>
            </div>
            
        </div>
        <!-- 中间 -->
        <div class="Safe-content">
            <div class="SafeC-top">
                <ul>
                    <li>
                        <h6>近一周告警态势——敏感场所</h6>
                        <div id="c3" style="width:100%;height:110%"></div>
                    </li>
                    <li>
                        <h6>近一周处置态势——敏感场所</h6>
                        <div id="c4" style="width:100%;height:110%"></div>
                    </li>
                </ul>
            </div>
            <div class="SafeC-bottom">
                <div id="china_map" style="width:100%;height:100%;"></div>
                <div class="main">
                    <div id="main" style="width: 100%;height: 120%;"></div>
                </div>
                
            </div>
        </div>
        <!-- 右边 -->
        <div class="Safe-right">
        <!-- 护校安园 -->
            <div class="SafeR-top">
                <h6>护校安园</h6>
                <ul class="SafeR-t">
                    <li>
                        <p>接入点位数</p>
                        <p>54</p>
                    </li>
                    <li>
                        <p>接入场所数</p>
                        <p>51</p>
                    </li>
                    <li>
                        <p>今日告警数</p>
                        <p>50</p>
                    </li>
                    <li>
                        <p>处置率</p>
                        <p>93%</p>
                    </li>
                </ul>
                <ul class="SafeRT-bottom">
                    <li>
                        <p>近一周告警top5</p>
                        <div id="box" style="width: 100%;height: 100%;"></div>
                    </li>
                    <li>
                        <p>告警类型占比</p>
                        <div id="huan1" style="width:100%;height:35%;"></div>
                        <ul class="SafeRb-ul">
                            <li>
                                <div>护学岗未就位</div>
                                <div class="SafeRb-num">13.643</div>
                                <div>50%</div>
                            </li>
                            <li>
                                <div>保安未值守</div>
                                <div>3.643</div>
                                <div>25%</div>
                            </li>
                            <li>
                                <div>校门未封闭</div>
                                <div>3.643</div>
                                <div>25%</div>
                            </li>
                        </ul>
                        
                    </li>
                </ul>
            </div>
        <!-- 敏感场所 -->
            <div class="SafeR-cont">
                <h6>敏感场所</h6>
                <ul class="SafeR-t">
                    <li>
                        <p>今日告警数</p>
                        <p>50</p>
                    </li>
                    <li>
                        <p>处置率</p>
                        <p>93%</p>
                    </li>
                    <li>
                        <p>接入点位数</p>
                        <p>232</p>
                    </li>
                    <li class="SafeRc-div">
                        <div>
                            <p>宗教场所</p>
                            <p>232</p>
                        </div>
                        <div>
                            <p>民间信仰场所</p>
                            <p>232</p>
                        </div>
                    </li>
                </ul>
                <div class="SafeRt-bottom">
                    <p>今日告警占比</p>
                    <div class="SafeRc-huan">
                        <div id="huan2" style="width:30%;height:80%;"></div>

                            <ul>
                                <li>
                                    <p>上塘</p>
                                    <p>81</p>
                                </li>
                                <li>
                                    <p>康桥</p>
                                    <p>71</p>
                                </li>
                                <li>
                                    <p>半山</p>
                                    <p>75</p>
                                </li>
                                <li>
                                    <p>湖墅</p>
                                    <p>87</p>
                                </li>
                                <li>
                                    <p>小河</p>
                                    <p>91</p>
                                </li>
                                <li>
                                    <p>拱宸桥</p>
                                    <p>95</p>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <p>上塘</p>
                                    <p>81</p>
                                </li>
                                <li>
                                    <p>康桥</p>
                                    <p>71</p>
                                </li>
                                <li>
                                    <p>半山</p>
                                    <p>75</p>
                                </li>
                                <li>
                                    <p>湖墅</p>
                                    <p>87</p>
                                </li>
                                <li>
                                    <p>小河</p>
                                    <p>91</p>
                                </li>
                                <li>
                                    <p>拱宸桥</p>
                                    <p>95</p>
                                </li>
                            </ul>

                    </div>
                    
                </div>
            </div>
        <!-- 人员聚集 -->
            <div class="SafeR-bottom">
                <h6>人员聚集</h6>
                <ul class="SafeR-t">
                    <li>
                        <p>接入点位数</p>
                        <p>54</p>
                    </li>
                    <li>
                        <p>告警总数</p>
                        <p>1,443</p>
                    </li>
                </ul>
                <p class="SafeRb-p">近一周告警top5</p>
                <div id="Bbox" style="width: 55%;height: 100%;"></div>
            </div>
        </div>
    </div>
    
</body>
<!-- <script src="./js/g2.min.js"></script> -->
<script src="js/echarts.min.js"></script>
<script src="./js/safe.js"></script>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // docEl.style.fontSize = 100 * (1280 / 3840) + 'px';
                    docEl.style.fontSize = 100 * (clientWidth / 3200) + 'px';
                };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })( document, window);

</script>
</html> 